@extends('base')

@section('content')
    <style>
        #steps {
            width:800px;
            margin:50px auto;
        }

        .step-item {
            display: inline-block;
            line-height: 26px;
            position: relative;
            background: #ffffff;
        }

        .step-item-tail {
            width: 100%;
            padding: 0 10px;
            position: absolute;
            left: 0;
            top: 13px;
        }

        .step-item-tail i {
            display: inline-block;
            width: 100%;
            height: 1px;
            vertical-align: top;
            background: #c2c2c2;
            position: relative;
        }
        .step-item-tail-done {
            background: #009688 !important;
        }

        .step-item-head {
            position: relative;
            display: inline-block;
            height: 26px;
            width: 26px;
            text-align: center;
            vertical-align: top;
            color: #009688;
            border: 1px solid #009688;
            border-radius: 50%;
            background: #ffffff;
        }

        .step-item-head.step-item-head-active {
            background: #009688;
            color: #ffffff;
        }

        .step-item-main {
            background: #ffffff;
            display: block;
            position: relative;
        }

        .step-item-main-title {
            font-weight: bolder;
            color: #555555;
        }
        .step-item-main-desc {
            color: #aaaaaa;
        }
    </style>
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-tab layui-tab-brief">
                <ul class="layui-tab-title">
                    <li class="layui-this">生产进度</li>
                    <li>跟进备注</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <div id="steps"></div>
                        <table id="dataTable" lay-filter="dataTable"></table>
                    </div>
                    <div class="layui-tab-item">
                        <form class="layui-form" action="{{route('caiwu.order.remarkStore',['id'=>$model->id])}}" method="post">
                            {{csrf_field()}}
                            <div class="layui-form-item">
                                <label for="" class="layui-form-label">节点</label>
                                <div class="layui-input-block">
                                    @include('common.get_node',['node_id'=>$model->node_id,'type'=>3])
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label for="" class="layui-form-label">备注内容</label>
                                <div class="layui-input-block">
                                    <textarea name="content" class="layui-textarea" lay-verify="required"></textarea>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label for="" class="layui-form-label">附件</label>
                                <div class="layui-input-block">
                                    @include('common.multiple_file')
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button type="button" lay-submit lay-filter="go" class="layui-btn layui-btn-sm" data-url="{{route('caiwu.order.remarkList',['id'=>$model->id])}}">确认</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

        </div>
    </div>
@endsection

@section('script')
    <script>
        layui.config({
            base: '/layuiadmin/' //静态资源所在路径
        }).extend({
            steps: 'modules/steps', //主入口模块
        }).use(['layer','table','form','laydate','upload','steps'],function () {
            var $ = layui.jquery;
            var layer = layui.layer;
            var form = layui.form;
            var table = layui.table;
            var laydate = layui.laydate;
            var upload = layui.upload;
            //用户表格初始化
            var dataTable = table.render({
                elem: '#dataTable'
                ,height: '600'
                ,url: "{{ route('caiwu.order.remarkList',['id'=>$model->id]) }}" //数据接口
                ,page: true //开启分页
                ,cols: [[ //表头
                    {field: 'node_name', title: '进度'}
                    ,{field: 'user_nickname', title: '跟进人'}
                    ,{field: 'created_at', title: '跟进时间'}
                    ,{field: 'content', title: '备注'}
                    ,{field: 'check_user_nickname', title: '审核人'}
                    ,{field: 'check_result', title: '审核备注'}
                    ,{field: 'check_time', title: '审核时间'}
                    ,{field: 'check_status', title: '审核状态',templet:function (d) {
                        if (d.check_status===1){
                            return '<span class="layui-badge" lay-event="check">待审核</span>'
                        }else if (d.check_status===2){
                            return '<span class="layui-badge layui-bg-black" lay-event="check">未通过</span>'
                        }else if (d.check_status===3){
                            return '<span class="layui-badge layui-bg-green" lay-event="check">通过</span>'
                        }
                    },width: 100}
                ]]
            });

            //监听工具条
            table.on('tool(dataTable)', function(obj){ //注：tool是工具条事件名，dataTable是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data //获得当前行数据
                    ,layEvent = obj.event; //获得 lay-event 对应的值
                if (layEvent === 'check'){
                    @can('caiwu.order.remarkCheck')
                    layer.open({
                        type: 2,
                        title: "审核",
                        shadeClose: true,
                        area: ["80%","80%"],
                        content: '/caiwu/order/remark/check?id=' + data.id,
                    })
                    @endcan
                }
            });

            var steps = layui.steps;

            var data = [
                @foreach($nodes as $item)
                {'title': "{{$item->name}}", "desc": ""},
                @endforeach
            ];
            steps.make(data, '#steps',{{$step}});

        })
    </script>
@endsection
